<template>
  <view class="video-page">
    <view class="page-title">视频专区</view>
    
    <!-- 视频分类导航 -->
    <scroll-view 
      class="video-type" 
      scroll-x 
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view 
        class="type-item" 
        v-for="(type, index) in videoTypes" 
        :key="type.id" 
        :class="{ active: currentType === type.id }" 
        @click="switchType(type.id, index)"
      >
        {{ type.name }}
      </view>
    </scroll-view>

    <!-- 视频列表 -->
    <view class="video-list" v-if="videoList.length > 0">
      <view 
        class="video-item" 
        v-for="video in videoList" 
        :key="video.id" 
        @click="playVideo(video.id)"
        hover-class="video-item-hover"
      >
        <image 
          :src="video.cover || '/static/video-default.jpg'" 
          class="video-cover" 
          mode="aspectFill"
        />
        <view class="video-duration">{{ formatDuration(video.duration) }}</view>
        <view class="video-info">
          <text class="video-title">{{ video.title }}</text>
          <view class="video-meta">
            <text class="video-author">{{ video.author }}</text>
            <text class="video-play-count">{{ video.playCount || '1.2万' }}播放</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空数据提示 -->
    <view class="empty-tip" v-else>
      <image src="/static/empty-video.png" class="empty-img" />
      <text>暂无视频内容，敬请期待</text>
    </view>

    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 视频分类
const videoTypes = ref([
  { id: 1, name: "推荐" },
  { id: 2, name: "千里眼" },
  { id: 3, name: "搞笑" },
  { id: 4, name: "娱乐" },
  { id: 5, name: "社会" },
  { id: 6, name: "音乐" },
  { id: 7, name: "科技" }
]);
const currentType = ref(1);
const scrollLeft = ref(0);

// 视频数据（模拟）
const videoList = ref([
  { 
    id: 1, 
    title: "这些箱子里装的中高档卷烟共有1350余条...", 
    author: "开心哈哈大笑...", 
    duration: "04:08", 
    cover: "/static/video1.jpg",
    playCount: "3.5万"
  },
  { 
    id: 2, 
    title: "一个“背包客”，从郑州坐火车往返江南某市...", 
    author: "往事随风飘飘...", 
    duration: "04:06", 
    cover: "/static/video2.jpg",
    playCount: "2.8万"
  },
  { 
    id: 3, 
    title: "大兴安岭出现超大型野兽，体重一吨比轿车还大……", 
    author: "自然探索频道", 
    duration: "05:20", 
    cover: "/static/video3.jpg",
    playCount: "5.1万"
  }
]);

// 切换分类
const switchType = (typeId, index) => {
  currentType.value = typeId;
  // 计算滚动位置，使选中的标签居中
  scrollLeft.value = index * 120 - 100;
  // 实际项目中可根据分类请求对应视频数据
  // loadVideoData(typeId);
};

// 播放视频（跳转到视频详情页）
const playVideo = (videoId) => {
  uni.navigateTo({ url: `/pages/video-detail/video-detail?id=${videoId}` });
};

// 格式化时长显示
const formatDuration = (duration) => {
  if (!duration) return '00:00';
  // 统一格式化为 MM:SS
  const parts = duration.split(':');
  if (parts.length === 2) {
    return `${parts[0].padStart(2, '0')}:${parts[1].padStart(2, '0')}`;
  }
  return duration;
};
</script>

<style scoped>
.video-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 60px;
  background: #f5f5f5;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
  color: #333;
}
/* 分类导航 */
.video-type {
  white-space: nowrap;
  padding: 10rpx 15rpx;
  margin-bottom: 15rpx;
  background: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.type-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 15rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}
.type-item.active {
  color: #ff3333;
}
.type-item.active::after {
  content: "";
  position: absolute;
  bottom: 5rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 30rpx;
  height: 4rpx;
  background: #ff3333;
  border-radius: 2rpx;
}
/* 视频列表 */
.video-list {
  background: #fff;
  border-radius: 8rpx;
  padding: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.video-item {
  display: flex;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.video-item:last-child {
  border-bottom: none;
}
.video-item-hover {
  background-color: #f9f9f9;
}
.video-cover {
  width: 200rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 15rpx;
  position: relative;
  flex-shrink: 0;
}
.video-duration {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 22rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
}
.video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video-title {
  font-size: 28rpx;
  line-height: 40rpx;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #333;
}
.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-author {
  font-size: 24rpx;
  color: #999;
}
.video-play-count {
  font-size: 22rpx;
  color: #bbb;
}
/* 空数据提示 */
.empty-tip {
  text-align: center;
  padding: 80rpx 0;
}
.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}
.empty-tip text {
  font-size: 28rpx;
  color: #999;
}
</style>